<template>
  <div>
    <el-row class="demo-autocomplete">
      <el-col :span="6">
        <el-input
            class="inline-input"
            v-model="comment_uid"
            placeholder="请输用户id"
            @keydown.enter.native="searchComment(pageNum,comment_uid,comment_vid)"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchComment(pageNum,comment_uid,comment_vid)"></el-button>
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-input
            class="inline-input"
            v-model="comment_vid"
            placeholder="请输入视频id"
            @keydown.enter.native="searchComment(pageNum,comment_uid,comment_vid)"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchComment(pageNum,comment_uid,comment_vid)"></el-button>
        </el-input>
      </el-col>

    </el-row>
    <el-table
        stripe
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        :data="items"
        style="width: 100%"
        highlight-current-row
        height="600">
      <el-table-column
          fixed
          sortable
          label="评论cid"
          width="100">
        <template slot-scope="scope">
          <i class="el-icon-receiving"></i>
          <span style="margin-left: 10px">{{ scope.row.comment_cid }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="作者uid"
          width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px"><el-tag size="medium">{{ scope.row.comment_uid }}</el-tag></span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="视频vid"
          width="100">
        <template slot-scope="scope">
          <i class="el-icon-paperclip"></i>
          <span style="margin-left: 10px">{{ scope.row.comment_vid }}</span>
        </template>
      </el-table-column>
      <el-table-column
          sortable
          label="上传时间"
          width="190">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.comment_timestamp }}</span>
        </template>
      </el-table-column>
      <el-table-column
          show-overflow-tooltip

          label="正文预览"
          width="300">
        <template slot-scope="scope">
          <i class="el-icon-document"></i>
          <span style="margin-left: 10px">{{ scope.row.comment_maintext }}</span>
        </template>
      </el-table-column>
      <el-table-column

          label="点赞数"
          width="120">
        <template slot-scope="scope">
          <i class="el-icon-thumb"></i>
          <span style="margin-left: 10px">{{ scope.row.comment_like }}</span>
        </template>
      </el-table-column>
      <el-table-column

          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="deleteComment(scope.row.comment_cid)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "CommentTab",


  data() {


    return {
      ip: this.GLOBAL.ip,
      port: this.GLOBAL.port,
      items: [],

      pageNum: 1,
      pageSize: 1,
      pageTotal: 1,
      total: 1,
      comment_uid: '',
      comment_vid: '',

    };
  },


  methods: {
    searchComment: function (pageNum,comment_uid,comment_vid) {
      var that = this;
      this.$http.get("http://"+that.ip+":"+that.port+"/comment/main?pageNum="+ pageNum + "&comment_uid=" + comment_uid + "&comment_vid=" + comment_vid)
          .then(function (response) {
            console.log(response.data.list);
            that.items = response.data.list;
            that.total = response.data.total;
            that.pageNum = response.data.pageNum;
            that.pageSize = response.data.pageSize;
            that.pageTotal = response.data.pageTotal;
          })
          .catch(function (err) {
            console.log(err);
          });

    },

    deleteComment: function (id) {
      var that = this;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        this.$http.get("http://"+that.ip+":"+that.port+"/comment/delete/" + id)
            .then(function (response) {
              console.log(response)
              that.searchComment(that.pageNum, that.comment_uid, that.comment_vid);
            }).catch(function (err) {
          console.log(err)
        });

        this.$message({
          type: 'success',
          message: '删除成功!'
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.searchComment(val, this.comment_uid, this.comment_vid);
    },


  },
  created()  {
    this.searchComment(1,'','');
  },
}
</script>

<style scoped>

</style>